<template>
  <div class='container'>
    <!-- 添加文章对话框 -->
  <el-dialog
  v-if='!this.edittotal.id'
  title="提示"
  :visible="showdiatitle"
  width="60%"
  @close="btncancletitle">
  <el-form ref="form" label-width="90px" :model="formdata" :rules="rules">
  <el-form-item label="文章标题:" prop="title">
    <el-input placeholder="请输入文章标签" v-model="formdata.title"></el-input>
  </el-form-item>
      <el-form-item label="文章内容:" prop="articleBody">
       <quill-editor ref="myTextEditor" v-model="formdata.articleBody" :options="editorOption"></quill-editor>
      </el-form-item>
  <el-form-item label="视频地址:" prop="videoURL">
    <el-input placeholder="请输入视频地址" v-model="formdata.videoURL"></el-input>
  </el-form-item>
    <!-- <el-input placeholder="请输入文章标签"></el-input> -->
<el-row type="flex" justify="center">
  <el-col :span='6'>
     <el-button @click='btncancletitle'>取 消</el-button>
    <el-button type="primary" @click='btnoktitle'>确 定</el-button>
  </el-col>
</el-row>
  </el-form>
</el-dialog>
<!-- 编辑文章对话框 -->
  <el-dialog
  v-else
  title="编辑"
  :visible="showdiatitle"
  width="60%"
  @close="editbtncancletitle">
  <el-form ref="form" label-width="90px" :model="edittotal" :rules="rules">
  <el-form-item label="文章标题:" prop="title">
    <el-input placeholder="请输入文章标签" v-model="edittotal.title"></el-input>
  </el-form-item>
      <el-form-item label="文章内容:" prop="articleBody">
       <quill-editor ref="myTextEditor" v-model="edittotal.articleBody" :options="editorOption"></quill-editor>
      </el-form-item>
  <el-form-item label="视频地址:" prop="videoURL">
    <el-input placeholder="请输入视频地址" v-model="edittotal.videoURL"></el-input>
  </el-form-item>
    <!-- <el-input placeholder="请输入文章标签"></el-input> -->
<el-row type="flex" justify="center">
  <el-col :span='6'>
     <el-button @click='editbtncancletitle'>取 消</el-button>
    <el-button type="primary" @click='editbtnoktitle'>确 定</el-button>
  </el-col>
</el-row>
  </el-form>
</el-dialog>
  </div>
</template>

<script>
// 导入文章编辑函数
import { update } from '@/api/hmmm/articles'
// import {addQuillTitle} from '@/plugin/quill-title'
import { quillEditor,Quill } from "vue-quill-editor";
//设置字体大小
let fontSizeStyle=Quill.import('attributors/style/size') //引入这个后会把样式写在style上
    fontSizeStyle.whitelist=['45px','60px','90px']
    Quill.register(fontSizeStyle,true)

//设置字体样式
let Font = Quill.import('attributors/style/font') //引入这个后会把样式写在style上
    let fonts = [false, 'SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial']
    Font.whitelist = fonts //将字体加入到白名单
    Quill.register(Font, true)
// 导入新增部门函数
import { add } from '@/api/hmmm/articles'
// import edit from './tinymce-editor'
export default {
  data() {
     var checkbody = (rule, value, callback) => {
        if (value==='') {
         callback(new Error('内容不能为空'));
        }
      }
    return {
      formdata: {
        title:'',
        videoURL:'',
        articleBody:''
      },
       editorOption: {
        //   配置工具栏
        placeholder: "请输入...",
         modules: {
           toolbar:[
              ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
         ['blockquote', 'code-block'],     //引用，代码块
  
         [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小
         [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
         [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
         [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
         [{ 'direction': 'rtl' }],             // 文本方向
  
         [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
         [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
  
         [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
         [{ 'font': [] }],     //字体
         [{ 'align': [] }],    //对齐方式
          
         ['clean'],    //清除字体样式
         ['image','video']    //上传图片、上传视
        ]
         }
      },
      rules: {
        title: [
          { required: true, message: '请输入文章名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        videoURL: [
          { required: true, message: '请输入标题名称', trigger: 'blur' },
          { min: 3, max: 100, message: '长度在 3 到 100个字符', trigger: 'blur' }
        ]
      } 
  }
  },
  props: {
    showdiatitle: {
      type:Boolean,
      default:false
    },
    edittotal :{
      type:[Boolean,Object,String],
      required:true
    }
  },
  components: {
    // edit
  },
  methods: {
    btncancletitle() {
      this.formdata={
          title:'',
         videoURL:'',
        articleBody:''
      }
      this.$refs.form.resetFields()
      this.$emit('btncancletitle')
    },
    btnoktitle () {
     this.$refs.form.validate( async isok=>{
       if(isok){
        //  alert('ok')
          const res = await add({
         title:this.formdata.title,
         articleBody: this.formdata.articleBody,
         videoURL:this.formdata.videoURL
      })
      console.log(res);
      this.$message('添加成功')
      this.$parent.articlelist()
      this.$emit('btnoktitle')
       }
     })
    
    },
    editbtncancletitle() {
      this.$emit('editbtncancletitle')
    },
   async editbtnoktitle() {
      await update({
        id:this.edittotal.id,
        title:this.edittotal.title,
        articleBody:this.edittotal.articleBody,
        videoURL: this.edittotal.videoURL
      })
       this.$parent.articlelist()
       this.$message('文章更新成功')
       this.$emit('editbtnoktitle')
    }
  }
}
</script>

<style>
.editor {
  line-height: normal !important;
  height: 150px;
}
.ql-container {
  height: 150px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode=video]::before {
    content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: '32px';
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: '标题6';
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: '等宽字体';
}
</style>
